<script setup>
import axios from "axios";
import {ref} from "vue";
import {ElMessage} from "element-plus";
let courier=ref({})
let total=ref()
let tableData=ref([])
const getCourierList = () => {
  axios.post("/api/system/getCourierList/",courier.value).then(
      res=>{
        if (res.data.code==200){
          tableData.value=res.data.data.list
          total.value=res.data.data.table
        }
      }
  )
}
getCourierList()
const handleSizeChange = () => {
  getCourierList()
}
const handleCurrentChange = () => {
  getCourierList()
}

// 添加管理员
let courierInfo=ref({
  areaCode :"",
  phone :"",
  realName :"",

})
let dialogVisible=ref(false)
const addCourierInfo = () => {
  dialogVisible.value=true
}
const save = () => {
  axios.post("/api/system/addCourierInfo/",courierInfo.value).then(
      res=>{
        if (res.data.code==200){
          ElMessage.success("添加成功")
          dialogVisible.value=false
        }
      }
  )
}

//公司下拉框
let company=ref([])
axios.get("/api/system/getTCompanyList").then(
    res=>{
      if (res.data.code==200){
        company.value=res.data.data
      }
    }
)
const packageList = () => {
  location.href="PackageStatusFilter"
}


const quickSearch = () => {
  location.href="QuickSearch"
}
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <span>添加管理员信息</span>
    <template #footer>
      <span class="dialog-footer">
          <el-form-item label="区号">
            <el-select v-model="courierInfo.areaCode" placeholder="please select your zone">
              <el-option label="菲律宾-马尼拉帕赛" value="菲律宾-马尼拉帕赛" />
              <el-option label="中国-上海浦东" value="中国-上海浦东" />
              <el-option label="中国-广州天河" value="中国-广州天河" />
            </el-select>
          </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="courierInfo.phone" />
        </el-form-item>

        <el-form-item label="真实姓名">
          <el-input v-model="courierInfo.realName" />
        </el-form-item>


        <el-form-item label="快递公司">
          <el-select v-model="courierInfo.companyId" placeholder="请选择公司">
            <el-option
                v-for="item in company"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
            />
          </el-select>
        </el-form-item>

        <el-button @click="save">确认提交</el-button>
      </span>
    </template>
  </el-dialog>


  <el-button @click="packageList">查看滞留信息</el-button>
  <el-button @click="quickSearch">快速查询</el-button>
  <el-button @click="addCourierInfo">添加管理员</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="快递员ID" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.courierId }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="快递员编号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.courierNo }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="所属区域区号（关联柜机区域）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.areaCode }}</span>
        </div>
      </template>
    </el-table-column>


    <el-table-column label="手机号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="真实姓名" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.realName }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="所属公司" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.companyName }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="管理员（关联t_admin）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.adminRole }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="会员余额" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.balance }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="创建时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="更新时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
        v-model:current-page="courier.pageNum"
        v-model:page-size="courier.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>

</style>